<template>
  <div id="Login">
    <div id="Info">
      <!-- Logo和标题 -->
      <div id="header">
        <img :src="LogoUrl" alt="" />
        <span>哇塞影院 - 后台管理</span>
      </div>
      <!-- username输入框 -->
      <div class="usernameInput">
        <span>UserName</span>
        <el-input v-model="username" placeholder="请输入用户名"></el-input>
      </div>
      <!-- password输入框 -->
      <div class="passwordInput">
        <span>Password</span>
        <el-input
          placeholder="请输入密码"
          v-model="password"
          show-password
        ></el-input>
      </div>
      <!-- 角色框 -->
      <div class="roleSelect">
        <span>Role</span>
        <el-select v-model="role" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 记住密码和重置密码 -->
      <div class="forgetPwd">
        <el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
        <a href="#" @click="forgetPwd">重置密码</a>
      </div>
      <!-- 登录按钮 -->
      <el-button @click="Login" type="primary">SIGN IN</el-button>
      <!-- 页脚 -->
      <div class="pageFooter">
        <span>Copyright 2021 哇塞影院 - 后台管理 Neusiri</span>
      </div>
    </div>
  </div>
</template>

<script>
import { adminLogin, forget } from "@/api/admin";
export default {
  name: "Login",
  data() {
    return {
      rememberPwd: false,
      LogoUrl: "http://localhost:8888/api/upload/Logo",
      username: "",
      password: "",
      role: "系统管理员",
      options: [
        {
          value: "选项1",
          label: "系统管理员",
        },
      ],
    };
  },
  methods: {
    // 重置密码
    forgetPwd: function () {
      if (this.username === "") {
        this.$message("请输入用户名");
        return;
      }
      this.$confirm("此操作将重置密码为初始密码,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          forget(this.username).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "重置成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消重置",
          });
        });
    },
    // 登录
    Login: function () {
      if (this.username === "" || this.password === "") {
        this.$message({
          message: "请输入用户名或密码",
          type: "error",
        });
        return;
      }
      if (this.rememberPwd) {
        // 记住密码
        localStorage.setItem("username", this.username);
        localStorage.setItem("password", this.password);
      } else {
        if (localStorage.getItem("username") != null) {
          localStorage.removeItem("username");
        }
        if (localStorage.getItem("password") != null) {
          localStorage.removeItem("password");
        }
      }
      adminLogin(this.username, this.password).then((res) => {
        if (res.code === 200) {
          localStorage.setItem("id", res.data.admin.id);
          localStorage.setItem("token", res.data.token);
          this.$message({
            message: "登陆成功",
            type: "success",
          });
          this.$router.push({
            path: "/index",
          });
        } else {
          this.$message("用户名或密码错误");
        }
      });
    },
    remember: function () {
      if (
        localStorage.getItem("username") != null &&
        localStorage.getItem("password") != null
      ) {
        this.username = localStorage.getItem("username");
        this.password = localStorage.getItem("password");
        this.rememberPwd = true;
      }
    },
  },
  mounted() {
    this.remember();
  },
};
</script>

<style lang="less" scoped>
#Login {
  margin: 0;
  padding: 0;
  width: 100%;
  #Info {
    width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    #header {
      margin-top: 50px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      img {
        width: 78px;
        height: 78px;
      }
      span {
        margin-left: 50px;
        font-size: 32px;
        font-weight: 700;
      }
    }
    // 用户名输入
    .usernameInput {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      span {
        font-size: 20px;
        color: #7f7f7f;
        margin-bottom: 10px;
      }
    }
    // 密码输入
    .passwordInput {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      span {
        font-size: 20px;
        color: #7f7f7f;
        margin-bottom: 10px;
      }
    }
    .roleSelect {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      span {
        font-size: 20px;
        color: #7f7f7f;
        margin-bottom: 10px;
      }
    }
    // 重置
    .forgetPwd {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      a {
        font-size: 16px;
        color: #333333;
        text-decoration: none;
      }
    }
    // 登录按钮
    .el-button {
      margin-top: 20px;
    }
    .pageFooter {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      span {
        display: block;
        margin: 0 auto;
        font-size: 18px;
        color: #7f7f7f;
        font-weight: 700;
      }
    }
  }
}
</style>